<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="test.css">
</head>
<body>
    <!-- 
        Flex布局，常指定父元素display: flex使其变为弹性盒子，子元素为其中的弹性元素
        Flex盒子也是一个块级元素   
        
        flex盒子常用属性
        1.flex-decoration
              a.column              垂直排列
              b.row                 水平排列（默认）
              c.colum-reverse       反向垂直排列（从下往上）
              d.row-reverse         反向水平排列（从右往左）
        2.flex-wrap
              a.wrap                溢出折行
              b.nowrap              不折行
              c.wrap-reverse        反向折行，往上或往左
        3.flex-flow
            相当于1和2的符合属性，例如  flex-flow: column wrap;
        4.justify-content
              a.flex-start          靠主轴开始方向
              b.flex-end            靠主轴结束方向
              c.center              居中
              d.space-between       两边顶格平均分布，间距相同
              e.space-around        内容上下都有间距，因此内容间的间距应有两份
              f.space-evenly        完全平分，内容间的间距等于内容到边框的间距
        5.align-items
            单根交叉轴的排列方式
              a.stretch             内容向交叉轴方向自动铺满，前提是内容没有设置高度
              b.center              居中
              c.flex-start          开头
              d.flex-end            结尾
        6.align-content
            多根交叉轴的排列方式，类似于justify-content，会覆盖掉align-items

        弹性元素常用属性
        7.align-self
            对弹性盒内的弹性元素的设置，属性值类似 align-items
        8.flex-grow
            当盒子空间大于内容所需空间时，对剩余间距空间的分配，数字代表权重值
        9.flex-shrink
            当盒子空间小于内容所需空间时，把内容按权重缩小，多设置0来禁止缩小
        10.flex-basis
            主轴的基准尺寸，优先级高于宽高，可根据主轴方向设置宽度或高度
        11.flex
            复合属性，flex:flex-grow flex-shrink flex-basis
        12.order
            设置排列顺序，数值越大排的越靠后
            
     -->

     <main>
        <div class="div1">1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>4</div>
        <div>4</div>

     </main>
</body>
</html>